<template>  
    <div>  
        <el-form ref="form" :model="users" label-width="80px">  
            <el-form-item label="登录姓名:">  
                <el-input v-model="users.loginName"></el-input>  
            </el-form-item>  
            <el-form-item label="密码:">  
                <el-input type="password" v-model="users.loginPwd"></el-input>  
            </el-form-item>  
            <el-form-item label="用户名:">  
                <el-input v-model="users.userName"></el-input>  
            </el-form-item>  
            <el-form-item label="性别:">  
                <el-select v-model="users.sex">  
                    <el-option label="男" value="男"></el-option>  
                    <el-option label="女" value="女"></el-option>  
                </el-select>  
            </el-form-item>  
            <el-form-item label="出生日期:">  
                <el-date-picker v-model="users.birthday" type="date" placeholder="选择出生日期"></el-date-picker>  
            </el-form-item>  
            <el-form-item label="电话:">  
                <el-input v-model="users.phone"></el-input>  
            </el-form-item>  
            <el-form-item label="部门">  
                <el-select v-model="users.deptID" @change="updateRoles" placeholder="请选择部门">  
                    <el-option  
                        v-for="dept in dept"  
                        :key="dept.deptID"  
                        :label="dept.deptName"  
                        :value="dept.deptID"  
                    ></el-option>  
                </el-select>  
            </el-form-item>  
            <el-form-item label="角色ID:">  
                <el-select v-model="users.roleID" placeholder="请选择角色">  
                    <el-option  
                        v-for="role in filteredRoles"  
                        :key="role.roleID"  
                        :label="role.roleName"  
                        :value="role.roleID"  
                    ></el-option>  
                </el-select>  
            </el-form-item>  
            <el-form-item>  
                <el-button type="primary" @click="add">保存</el-button>  
                <el-button @click="cancel">取消</el-button>  
            </el-form-item>  
        </el-form>  
    </div>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            users: {  
                loginName: "刘亦菲",  
                loginPwd: "123",  
                userName: "刘小菲",  
                sex: "男",  
                birthday: "2025-01-02",  
                phone: "13142249090",  
                imgID: "1",  
                roleID: "",  
                deptID: ""  
            },  
            roles: [],  
            dept: [],  
            filteredRoles: [] //筛选的角色  
        }  
    },  
    props: {  
        dialogVisible: Boolean  
    },  
    methods: {  
        ShowRole() {  
            this.axios({  
                method: "get",  
                url: "Role",  
            }).then(res => {  
                this.roles = res.data;  
            }).catch(err => {  
                console.log("请求失败:", err);  
            });  
        },  
        ShowDept() {  
            this.axios({  
                method: "get",  
                url: "Dept"  
            }).then(res => {  
                this.dept = res.data;  
            }).catch(err => {  
                console.log(err);  
            });  
        },  
        updateRoles() {  
            // 根据选择的部门过滤角色  
            this.filteredRoles = this.roles.filter(role => role.deptID === this.users.deptID);  
            this.users.roleID = ""; // 重置角色ID  
        },  
        add() {  
            this.axios({  
                method: "post",  
                url: "Users",  
                data: JSON.stringify(this.users),  
                headers: {  
                    'Content-Type': 'application/json',  
                }  
            }).then(res => {  
                if (res) {  
                    this.$notify({  
                        title: '添加成功!',  
                        message: '这是一条成功的提示消息',  
                        type: 'success'  
                    });  
                    this.$refs.form.resetFields();  
                    this.$emit("update:dialogVisible", false);  
                    this.$emit('Refresh');  
                } else {  
                    this.$notify.error({  
                        title: '添加失败!',  
                        message: '这是一条错误的提示消息'  
                    });  
                }  
            }).catch(err => {  
                console.error("请求失败:" + err);  
                this.$notify.error({  
                    title: '添加失败!',  
                    message: '这是一条错误的提示消息'  
                });  
            });  
        }  
    },  
    watch: {  
        dialogVisible(v) {  
            if (v) {  
                this.users = JSON.parse(JSON.stringify(this.users));  
                this.filteredRoles = []; // 重置角色选项  
            }  
        },  
    },  
    created() {  
        this.ShowRole();  
        this.ShowDept();  
    }  
}  
</script>  

<style>  
.form-row {  
    display: grid;  
    grid-template-columns: 100px 1fr;  
    grid-gap: 10px;  
    margin-bottom: 10px;  
}  

.form-row label {  
    text-align: right;  
}  
</style>  